<template>
  <!-- 航空货物综合统计 -->
  <div class="content-app">
    <div class="up">
      <SecurityCheckHeader title="航空货物综合统计" @change="change" :withExportButton="false" @search="search" />
    </div>
    <div class="comprehensive">
      <a-row :gutter="16">
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>申报件数</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataall" ref="chart" @echar="echarfuck" />
              </div>
              <div class="chart_right">
                <div class="child" v-for="(item, index) in dataall.data" :key="index">
                  <div class="top">
                    <div class="log" :style="{ background: item.color }"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echarup('', item.name)">件数：{{ item.value }}</div>
                    <div class="child">占比：{{ item.proportion }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>低风险货物级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLow" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echarup('', '低风险')">
                    <p>总件数</p>
                    <span>{{ dataLow.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echarup('', '低风险')">
                    <p>开包数</p>
                    <span>{{ dataLow.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLow.proportion }}</span>
                  </div>
                </div>
                <div class="childcop" v-for="(item, index) in dataLow.data" :key="index">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echarup(item, '低风险')">件数：{{ item.value }}</div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>优先级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLowcp" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echarup('', '优先级')">
                    <p>总件数</p>
                    <span>{{ dataLowcp.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echarup('', '优先级')">
                    <p>开包数</p>
                    <span>{{ dataLowcp.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLowcp.proportion }}</span>
                  </div>
                </div>
                <div class="childcop" v-for="(item, index) in dataLowcp.data" :key="index">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echarup(item, '优先级')">件数：{{ item.value }}</div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>普通级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLowpt" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echarup('', '普通')">
                    <p>总件数</p>
                    <span>{{ dataLowpt.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echarup('', '普通')">
                    <p>开包数</p>
                    <span>{{ dataLowpt.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLowpt.proportion }}</span>
                  </div>
                </div>
                <div class="childcop" v-for="(item, index) in dataLowpt.data" :key="index">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echarup(item, '普通')">件数：{{ item.value }}</div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>严控级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLowyk" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echarup('', '严控级')">
                    <p>总件数</p>
                    <span>{{ dataLowyk.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echarup('', '严控级')">
                    <p>开包数</p>
                    <span>{{ dataLowyk.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLowyk.proportion }}</span>
                  </div>
                </div>
                <div class="childcop" v-for="(item, index) in dataLowyk.data" :key="index">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echarup(item, '严控级')">件数：{{ item.value }}</div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>高风险货物级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLowgf" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echarup('', '高风险')">
                    <p>总件数</p>
                    <span>{{ dataLowgf.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echarup('', '高风险')">
                    <p>开包数</p>
                    <span>{{ dataLowgf.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLowgf.proportion }}</span>
                  </div>
                </div>
                <div class="childcop" v-for="(item, index) in dataLowgf.data" :key="index">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echarup(item, '高风险')">件数：{{ item.value }}</div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import GraphicEchart from '../components/graphicHome.vue'
import SecurityCheckHeader from '../components/securityCheckHeader.vue'
import { comprehensive } from '@/api/statistics/statistics.js'
import { number } from 'echarts'
export default {
  data() {
    return {
      dataall: {
        id: 1,
        name: '总件数',
        name2: '申报件数',
        cont: '',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
          { value: 310, name: '3' },
          { value: 310, name: '4' },
          { value: 310, name: '5' },
        ],
        top: '41%',
        textStyle: {
          fontSize: '20',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '36',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#9B73B4', '#66ACD4', '#85C997', '#F1B172', '#E86E5A'],
        legend: {
          left: '10%',
          top: '35%',
          align: 'left',
          itemGap: 18,
          itemWidth: 20,
          itemHeight: 20,
          shadowBlur: 10,
          shadowOffsetY: 0,
          shadowOffsetX: 0,
          borderColor: '#2a2a34',
          borderWidth: 2,
          textStyle: {
            color: '#D8DDE3',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                fontSize: 18,
                color: '#D8DDE3',
              },
              percent: {
                padding: [0, 0, 0, 10],
                color: '#D8DDE3',
                fontSize: 18,
              },
            },
          },
          formatter: (name) => {
            const item = this.dataall.data.find((i) => {
              return i.name === name
            })
            const p = ((item.value / sum) * 100).toFixed(0)
            return '{name|' + name + '}' + '{percent|' + p + '}' + ' %'
          },
        },
      },
      dataLow: {
        id: 2,
        name: '开包数',
        name2: '低风险',
        cont: '500',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
          { value: 310, name: '3' },
        ],
        top: '41%',
        textStyle: {
          fontSize: '20',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '36',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#6161BD', '#FAD153', '#DC5594'],
      },
      dataLowcp: {
        id: 3,
        name: '开包数',
        name2: '优先',
        cont: '500',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
          { value: 310, name: '3' },
        ],
        top: '41%',
        textStyle: {
          fontSize: '20',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '36',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#6161BD', '#FAD153', '#DC5594'],
      },
      dataLowpt: {
        id: 4,
        name: '开包数',
        name2: '普通',
        cont: '500',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
          { value: 310, name: '3' },
        ],
        top: '41%',
        textStyle: {
          fontSize: '20',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '36',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#6161BD', '#FAD153', '#DC5594'],
      },
      dataLowyk: {
        id: 5,
        name: '开包数',
        name2: '严控',
        cont: '500',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
          { value: 310, name: '3' },
        ],
        top: '41%',
        textStyle: {
          fontSize: '20',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '36',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#6161BD', '#FAD153', '#DC5594'],
      },
      dataLowgf: {
        id: 6,
        name: '开包数',
        name2: '高风险',
        cont: '500',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
          { value: 310, name: '3' },
        ],
        top: '38%',
        textStyle: {
          fontSize: '20',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '36',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#6161BD', '#FAD153', '#DC5594'],
      },
      queryData: {
        startTime: '',
        endTime: '',
        agentLevel: '',
        agentCode: '',
      },
    }
  },
  components: {
    GraphicEchart,
    SecurityCheckHeader,
  },
  created() {
    // this.getData();
  },
  mounted() {},
  activated() {
    if (Object.keys(this.$route.params).length !== 0) {
      this.queryData.startTime = this.$route.params.startTime
      this.queryData.endTime = this.$route.params.endTime
      this.queryData.agentLevel = this.$route.params.agentLevel
      this.queryData.agentCode = this.$route.params.agentCode
    }
    this.getData()
  },
  methods: {
    search(data) {
      this.queryData = {
        startTime: data[0][0],
        endTime: data[0][1],
        agentLevel: data[1],
        agentCode: data[2],
      }
      this.getData()
    },
    echarfuck(data) {
      this.queryData.openResult = ''
      this.queryData.riskRating = data.namech
      // this.$router.push({
      //   path: '/securityCheck/waybillTable',
      //   query: this.queryData,
      // })
      let param = JSON.parse(JSON.stringify(this.queryData))
      this.$router.push({
        path: './waybillTable',
        name: 'WaybillTable',
        params: param,
      })
    },
    echarup(data, item) {
      this.queryData.riskRating = item
      this.queryData.openResult = data.name ? data.name : data
      let param = JSON.parse(JSON.stringify(this.queryData))
      this.$router.push({
        path: './waybillTable',
        name: 'WaybillTable',
        params: param,
      })
    },
    //点击跳转
    echar(data) {
      if (data) {
        if (data.namefa == '申报件数') {
          if (data.namech == '') {
            this.queryData.riskRating = ''
            this.queryData.openResult = ''
          } else {
            this.queryData.riskRating = data.namech
            this.queryData.openResult = ''
          }
        } else {
          this.queryData.riskRating = data.namefa
          this.queryData.openResult = data.namech
        }
      }
      let param = JSON.parse(JSON.stringify(this.queryData))
      this.$router.push({
        path: './waybillTable',
        name: 'WaybillTable',
        params: param,
      })
    },
    change() {
      // this.$router.push({
      //   path: './cargoTable',
      //   query: this.queryData,
      // })
      let param = JSON.parse(JSON.stringify(this.queryData))
      this.$router.push({
        path: './cargoTable',
        name: 'CargoTable',
        params: param,
      })
    },
    async getData() {
      try {
        const result = await comprehensive(this.queryData)
        let count = 0
        let counts = 0
        let arr = []
        if (result.data.length == 0) {
          result.data = [
            {
              no: 1,
              risk: '普通',
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
            {
              no: 2,
              risk: '高风险',
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
            {
              no: 3,
              risk: '严控',
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
            {
              no: 4,
              risk: '优先',
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
            {
              no: 5,
              risk: '低风险',
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
          ]
        }
        let datalist = [
          {
            no: 1,
            risk: '普通',
            num: 0,
            kxsNum: 0,
            yjNum: 0,
            jyNum: 0,
            fxNum: 0,
          },
          {
            no: 2,
            risk: '高风险',
            num: 0,
            kxsNum: 0,
            yjNum: 0,
            jyNum: 0,
            fxNum: 0,
          },
          {
            no: 3,
            risk: '严控',
            num: 0,
            kxsNum: 0,
            yjNum: 0,
            jyNum: 0,
            fxNum: 0,
          },
          {
            no: 4,
            risk: '优先',
            num: 0,
            kxsNum: 0,
            yjNum: 0,
            jyNum: 0,
            fxNum: 0,
          },
          {
            no: 5,
            risk: '低风险',
            num: 0,
            kxsNum: 0,
            yjNum: 0,
            jyNum: 0,
            fxNum: 0,
          },
        ]
        result.data.forEach((element) => {
          datalist.forEach((res) => {
            if (res.risk === element.risk) {
              res.num = element.num
              res.kxsNum = element.kxsNum
              res.yjNum = element.yjNum
              res.jyNum = element.jyNum
              res.fxNum = element.fxNum
            }
          })
        })
        //获取总件数：
        datalist.forEach((item) => {
          count += item.num
          let obj = { value: item.num, name: item.risk }
          arr.push(obj)
        })
        this.dataall.cont = count
        this.dataall.data = arr
        this.dataall.color = []
        this.dataall.data.forEach((element) => {
          if (element.name == '高风险') {
            element.color = '#E86E5A'
          } else if (element.name == '严控') {
            element.color = '#9B73B4'
          } else if (element.name == '优先') {
            element.color = '#85C997'
          } else if (element.name == '低风险') {
            element.color = '#F1B172'
          } else if (element.name == '普通') {
            element.color = '#66ACD4'
          }
          counts += element.value
          this.dataall.color.push(element.color)
        })
        this.dataall.data.forEach((element) => {
          element.proportion = element.value / counts ? element.value / counts : 0
          element.proportion = Math.floor(element.proportion * 100) + '%'
        })
        datalist.forEach((res) => {
          if (res.risk == '低风险') {
            let arr = res.yjNum + res.jyNum + res.fxNum
            if (res.risk) {
              this.dataLow.data = [
                {
                  name: '移交',
                  value: res.yjNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: res.jyNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: res.fxNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            } else {
              this.dataLow.data = [
                {
                  name: '移交',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            }
            this.dataLow.color = ['#FAD153', '#DC5594', '#6161BD']
            this.dataLow.num = res.num
            this.dataLow.kxsNum = arr ? arr : res.kxsNum
            this.dataLow.proportion = Math.floor((this.dataLow.kxsNum / res.num) * 100)
              ? Math.floor((this.dataLow.kxsNum / res.num) * 100) + '%'
              : '0%'
            this.dataLow.cont = arr
          } else if (res.risk == '优先') {
            let arr = res.yjNum + res.jyNum + res.fxNum
            if (res.risk) {
              this.dataLowcp.data = [
                {
                  name: '移交',
                  value: res.yjNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: res.jyNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: res.fxNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            } else {
              this.dataLowcp.data = [
                {
                  name: '移交',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            }
            this.dataLowcp.color = ['#FAD153', '#DC5594', '#6161BD']
            this.dataLowcp.num = res.num
            this.dataLowcp.kxsNum = arr ? arr : res.kxsNum
            this.dataLowcp.proportion = Math.floor((this.dataLowcp.kxsNum / res.num) * 100)
              ? Math.floor((this.dataLowcp.kxsNum / res.num) * 100) + '%'
              : '0%'
            this.dataLowcp.cont = arr
          } else if (res.risk == '普通') {
            let arr = res.yjNum + res.jyNum + res.fxNum
            if (res.risk) {
              this.dataLowpt.data = [
                {
                  name: '移交',
                  value: res.yjNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: res.jyNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: res.fxNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            } else {
              this.dataLowpt.data = [
                {
                  name: '移交',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            }
            this.dataLowpt.color = ['#FAD153', '#DC5594', '#6161BD']
            this.dataLowpt.num = res.num
            this.dataLowpt.kxsNum = arr ? arr : res.kxsNum
            this.dataLowpt.proportion = Math.floor((this.dataLowpt.kxsNum / res.num) * 100)
              ? Math.floor((this.dataLowpt.kxsNum / res.num) * 100) + '%'
              : '0%'
            this.dataLowpt.cont = arr
          } else if (res.risk == '严控') {
            let arr = res.yjNum + res.jyNum + res.fxNum
            if (res.risk) {
              this.dataLowyk.data = [
                {
                  name: '移交',
                  value: res.yjNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: res.jyNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: res.fxNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            } else {
              this.dataLowyk.data = [
                {
                  name: '移交',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            }
            this.dataLowyk.color = ['#FAD153', '#DC5594', '#6161BD']
            this.dataLowyk.num = res.num
            this.dataLowyk.kxsNum = arr ? arr : res.kxsNum
            this.dataLowyk.proportion = Math.floor((this.dataLowyk.kxsNum / res.num) * 100)
              ? Math.floor((this.dataLowyk.kxsNum / res.num) * 100) + '%'
              : '0%'
            this.dataLowyk.cont = arr
          } else if (res.risk == '高风险') {
            let arr = res.yjNum + res.jyNum + res.fxNum
            if (res.risk) {
              this.dataLowgf.data = [
                {
                  name: '移交',
                  value: res.yjNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: res.jyNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: res.fxNum,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            } else {
              this.dataLowgf.data = [
                {
                  name: '移交',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.yjNum / arr) * 100) + '%',
                },
                {
                  name: '拒运',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.jyNum / arr) * 100) + '%',
                },
                {
                  name: '放行',
                  value: 0,
                  prot: arr == 0 ? '0%' : Math.floor((res.fxNum / arr) * 100) + '%',
                },
              ]
            }
            this.dataLowgf.color = ['#FAD153', '#DC5594', '#6161BD']
            this.dataLowgf.num = res.num
            this.dataLowgf.kxsNum = arr ? arr : res.kxsNum
            this.dataLowgf.proportion = Math.floor((this.dataLowgf.kxsNum / res.num) * 100)
              ? Math.floor((this.dataLowgf.kxsNum / res.num) * 100) + '%'
              : '0%'
            this.dataLowgf.cont = arr
          }
        })
        this.$refs.chart.init()
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.up {
  padding-top: 12px;
}
.comprehensive {
  width: 100%;
  height: 100%;
  .chart {
    width: 100%;
    height: 36.5vh;
    background: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
  }
}
.header {
  display: flex;
  justify-content: flex-start;
  > p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    margin: 0 0 24px 0;
  }
}
.chart_cont {
  width: 100%;
  height: 90%;
  display: flex;
  justify-content: space-between;
  > .chart_left {
    width: 50%;
    height: 100%;
  }
  > .chart_right {
    width: 45%;
    height: 100%;
    // padding-right: 10%;
    padding-left: 1%;
    > .analysis {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      // margin-top: 20px;
      > .analysis_cont {
        // width: 30%;
        height: 100%;
        > p {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
          margin: 0;
        }
        > span {
          font-size: 23px;
          font-family: DIN;
          font-weight: bold;
          color: #101116;
          cursor: pointer;
        }
        > span:hover {
          color: blue;
        }
      }
    }
    > .child {
      width: 100%;
      > .top {
        width: 100%;
        height: 29px;
        display: flex;
        align-items: center;
        > .log {
          width: 14px;
          height: 14px;
          // background: #e86e5a;
          border-radius: 2px;
        }
        > .name {
          margin-left: 6px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
        }
      }
      > .boot {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #747784;
          cursor: pointer;
        }
        > .child:hover {
          color: blue;
        }
      }
    }
    // .child:nth-child(1) {
    //   .log {
    //     background: #e86e5a;
    //   }
    // }
    // .child:nth-child(2) {
    //   .log {
    //     background: #f1b172;
    //   }
    // }
    // .child:nth-child(3) {
    //   .log {
    //     background: #85c997;
    //   }
    // }
    // .child:nth-child(4) {
    //   .log {
    //     background: #66acd4;
    //   }
    // }
    // .child:nth-child(5) {
    //   .log {
    //     background: #9b73b4;
    //   }
    // }
    > .childcop {
      width: 100%;
      > .top {
        width: 100%;
        height: 37px;
        display: flex;
        align-items: center;
        > .log {
          width: 14px;
          height: 14px;
          border-radius: 2px;
        }
        > .name {
          margin-left: 6px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
        }
      }
      > .boot {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #747784;
          cursor: pointer;
        }
        > .child:hover {
          color: blue;
        }
      }
    }
    .childcop:nth-child(2) {
      .log {
        background: #fad153;
      }
    }
    .childcop:nth-child(3) {
      .log {
        background: #dc5594;
      }
    }
    .childcop:nth-child(4) {
      .log {
        background: #6161bd;
      }
    }
  }
}
::v-deep .ant-col {
  margin-bottom: 16px;
}
</style>